<template>
  <div class="home">
    <img class="img-1" src="@/assets/图层 65.png" alt="">
    <img class="img-2" src="@/assets/图层 62.png" alt="">
    <img class="img-3 animate__animated animate__rubberBand" src="@/assets/title.png" alt="">
    <img class="img-4" src="@/assets/time.png" alt="">
    <img class="img-5" src="@/assets/左边树.png" alt="">
    <img class="img-6" src="@/assets/右边树.png" alt="">
    <img class="img-7 animate__animated animate__bounceInDown ad-05s" src="@/assets/组 5.png" alt="">
    <img class="img-8 animate__animated animate__bounceInDown ad-1s" src="@/assets/图层 3 拷贝.png" alt="">
    <img class="img-9 animate__animated animate__bounceInDown ad-2s" src="@/assets/图层 78.png" alt="">
    <img class="img-10" src="@/assets/云雾.png" alt="">
    <img class="img-11" src="@/assets/人.png" alt="" :class="{'img-11-1':isShow}">
    <div class="bottom">
      <img class="img-12 animate__animated animate__bounceInUp ad-3s" src="@/assets/图层 77.png" alt="">
    </div>
    <img class="img-13" src="@/assets/按钮.png" alt="" @click="$router.push('/map')">
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'HomeView',
  components: {
  },
  data() {
    return {
      isShow: false
    }
  },
  mounted() {
    setTimeout(()=> {
      this.isShow = true
    },7000)
  }
}
</script>

<style lang="less" scoped>
@keyframes ren2 {
  0%{
    transform: rotate(0deg) translateY(-0.2rem);
    opacity: 1;

  }
  50%{
    transform: rotate(5deg) translateY(0rem);
    opacity: 1;

  }
  100%{
    transform: rotate(0deg) translateY(-0.2rem);
    opacity: 1;

  }
}
.img-11-1{
  opacity: 1;
  animation: ren2 4s linear infinite !important;
}
img{
  display: block;
}
.ad-05s{
  animation-delay: .5s;
}
.ad-1s{
  animation-delay: 1s;
}
.ad-2s{
  animation-delay: 1.5s;
}
.ad-3s{
  animation-delay: 2s;
}
.ad-4s{
  animation-delay: 2.5s;
}
.home{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e5f2d2+0,aed5d3+100 */
  position: relative;
  padding-top: 1rem;
  // box-sizing: border-box;
  min-height: 100vh;
  overflow: hidden;
}
.img-13{
  width: 3.7rem;
  position: fixed;
  bottom: .5rem;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  z-index: 2;
  animation: btn 2s 3s infinite;
}
.bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  z-index: 2;
  @keyframes btn {
    0%{
      transform: translateX(-50%) scale(.9);
      opacity: 1;
    }
    50%{
      transform: translateX(-50%) scale(1);
      opacity: 1;
    }
    100%{
      transform: translateX(-50%) scale(.9);
      opacity: 1;
    }
    
  }


  .img-12{
    width: 7.5rem;
    display: block;
  }
}

@keyframes ren {
  0%{
    transform: scale(0.1) rotate(0deg);
    z-index: -1;
    opacity: 1;
    top: 3.3rem;
    right: .2rem;
  }
  25%{
    transform: scale(.11) rotate(10deg);
    z-index: 1;
    opacity: 1;
    top: 4rem;
    right: 2.2rem;
  }
  50%{
    transform: scale(.5) rotate(20deg);
    z-index: 1;
    opacity: 1;
    top: 4.8rem;
    right: 3.2rem;
  }
  70%{
    transform: scale(.7) rotate(10deg);
    z-index: 1;
    opacity: 1;
    top: 5.4rem;
    right: 3.6rem;
  }
  100%{
    transform: scale(1) rotate(0deg);
    z-index: 1;
    opacity: 1;
    top: 7rem;
    right: .2rem;
  }
}

.img-11{
  width: 2.69rem;
  position: absolute;
  top: 7rem;
  right: .2rem;
  opacity: 0;
  animation: ren 4s 3s linear forwards ;
}
@keyframes yunwu {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.img-10{
  width: 7.5rem;
  position: absolute;
  right: 0;
  top: 8.65rem;
  opacity: 0;
  animation: yunwu 1s 3.5s linear forwards;
}
.img-9{
  width: 4.43rem;
  position: absolute;
  top: 6.4rem;
  right:0;
}
.img-8{
  width: 5.72rem;
  position: absolute;
  right: 0;
  top: 4.5rem;
}

.img-7{
  width: 7.5rem;
  height: 7.15rem;
  left: 0;
  position: absolute;
  top: 3.8rem;
  z-index: 1;
}
.img-6{
  width: .58rem;
  position: absolute;
  right:0;
  top: 2.27rem;
}
.img-5{
  width: .99rem;
  position: absolute;
  left: 0;
  top: 2.27rem;
  z-index: 2;
}
.img-4{
  display: block;
  margin: .35rem auto 0;
  width: 4.75rem;
}
.img-3{
  width: 7.13rem;
  display: block;
  margin: auto;
  
}
.img-1{
  position: absolute;
  top: -.4rem;
  left: 0;
  width: 1.88rem;
}
.img-2{
  position: absolute;
  top: -1.2rem;
  right: 0;
  width: 2.02rem;
}
</style>
